<template>
  <div class="article">
    <div class="container">
      <el-row class="title" type="flex" justify="space-between">
        <el-col :span="1"></el-col>
        <el-col :span="19">
          <el-input
            type="text"
            placeholder="请输入文章标题"
            v-model="articleContent"
            maxlength="100"
            autofocus
            :disabled="!isEditable"
            show-word-limit
          />
        </el-col>
        <el-col :span="4" class="btns">
          <el-button :disabled="!isEditable" type="danger" plain>
            保存草稿
          </el-button>
          <el-button :disabled="!isEditable" type="danger">发布文章</el-button>
        </el-col>
      </el-row>
      <div class="articleEditer">
        <mavon-editor
          :autofocus="false"
          :editable="isEditable"
          :placeholder="placeholderInfo"
          codeStyle="atom-one-dark"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      articleContent: "", // 文章内容
      isEditable: false, // 是否可以发表
      placeholderInfo: "登录后才能发表文章丨支持 Markdown 语法",
    };
  },
  mounted() {
    let logStatus = window.sessionStorage.getItem("logStatus");
    if (logStatus !== null) {
      this.isEditable = true;
    }
  },
};
</script>
<style scoped>
.article {
  display: flex;
  justify-content: center;
}
.article .container {
  width: 100%;
  margin-top: 40px;
}
.title .btns {
  margin-left: 13px;
}
.title img {
  width: 50px;
  border-radius: 50px;
}
.articleEditer {
  display: flex;
  justify-content: center;
}
.articleEditer /deep/ .v-note-wrapper {
  margin-top: 30px;
  height: 80vh;
  width: 98%;
}
</style>